<template>
  <el-card class="box-card">
    <el-form label-width="80px" class="user-form" :visible="isAddAdmin">
      <el-form-item label="头像">
        <el-upload
          v-show="!isUpdate"
          class="avatar-uploader"
          :headers="headerObj"
          :action="uploadUrl"
          cover
          :on-success="handleAvatarSuccess"
          :show-file-list="false"
        >
          <img v-if="form.avatar" :src="form.avatar" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon" />
        </el-upload>
      </el-form-item>
      <el-form-item label="用户名">
        <el-input v-model="form.username" type="text" label="用户名" />
      </el-form-item>
      <el-form-item label="住址">
        <el-input v-model="form.address" type="text" label="住址" />
      </el-form-item>
      <el-form-item label="联系方式">
        <el-input v-model="form.phone" type="phone" label="联系方式" />
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="form.email" type="text" label="邮箱" />
      </el-form-item>
      <el-form-item label="性别">
        <el-radio v-model="form.gender" :label="2">保密</el-radio>
        <el-radio v-model="form.gender" :label="0">男</el-radio>
        <el-radio v-model="form.gender" :label="1">女</el-radio>
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="form.userDesc" type="textarea" placeholder="请输入内容" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
        <el-button type="primary" plain @click="onCancel">取消</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import { mapGetters } from 'vuex'
import { addAdmin } from '@/api/user'

export default {
  name: 'AddAdmin',
  data() {
    return {
      form: {},
      uploadUrl: process.env.VUE_APP_BASE_API + '/travel/updateAttrBanner',
      headerObj: ''
    }
  },
  computed: {
    ...mapGetters([
      'token'
    ])
  },
  created() {
    this.headerObj = {
      'token': this.token
    }
  },
  methods: {
    handleAvatarSuccess(res) {
      console.log(res)
      if (res.code === 200) {
        const { bannerUrl } = res.data
        this.form.avatar = bannerUrl
        console.log(this.form)
      } else {
        this.$message.error(res.message)
      }
    },
    async onSubmit() {
      const res = await addAdmin(this.form)
      if (res.code === 200) {
        this.$message.success(res.message)
        this.onCancel()
      } else {
        this.$message.error(res.message)
      }
    },
    onCancel() {
      this.$emit('update:isAddAdmin', false)
    }
  }
}
</script>

<style lang="scss" scoped>

.box-card {
    width: 100%;
    height: 100%;

  }
.el-form {

    width: 500px;

    .avatar-uploader .el-upload {
        border: 1px dashed #409EFF;
        // border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
        border: 1px solid #DCDFE6;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
}
</style>
